<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 224px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="ln()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_0_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="log()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_0_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="log(10, )" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_0_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="exp()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_0_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="log_{ }()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_0_5.png"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 208px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="sin()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_1_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="tan()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_1_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="sec()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_1_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="cos()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_1_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="cot()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_1_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="csc()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_1_6.png"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 268px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="sin^-1()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_2_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="tan^-1()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_2_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="sec^-1()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_2_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="cos^-1()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_2_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="cot^-1()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_2_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="csc^-1()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_2_6.png"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 268px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="arcsin()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_3_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arctan()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_3_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arcsec()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_3_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arccos()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_3_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arccot()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_3_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arccsc()" data-type="function" data-poupe="" data-key=""
				 style="height: 40px;"><img class="equation-top-dom-item-image"
											src="../../../assets/images/latex/hs_3_6.png"></div>
		</div>
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>
<style scoped lang="scss">

</style>
